
import {
  message,
  Layout, Pagination, Menu,
  Input, Spin
} from 'antd';
import React, { useState} from 'react';
import AgentServerPermission from './components/AgentServerPermission';
import { query, savePermission } from './service';
import { useRequestHandle } from '@/utils/utils';
import styles from './index.less';
import { useUpdateEffect } from '@umijs/hooks';
import { useEffect } from 'react';

const { Sider, Content } = Layout;
const { Search } = Input;
const RoleManage = () => {
  const pageSize = 11;
  const [hoveFormValues, setHoveFormValues] = useState({});
  const [loading, setLoading] = useState(false);

  const [pageResult, setPageResult] = useState({
    current: 1,
    items: [],
    itemsPerPage: 15,
    totalItems: 0,
    totalPages: 0,
  });
  const [pageSearch, setPageSearch] = useState({
    current: 1,
    pageSize: 15,
    keyword: ""
  });


  const getPageRequest = useRequestHandle(query, (data) => {
    if (!hoveFormValues.id) { setHoveFormValues(data.items[0]); }
    else {
      const item = data.items.find(item => item.id === hoveFormValues.id);
      if (item) {
        setHoveFormValues(item);
      }
    }
    setPageResult(data);
  });


  useUpdateEffect(() => {
    getPageRequest.run(pageSearch);
  }, [pageSearch]);

  useEffect(() => {
    async function init() {
      setLoading(true);
      const response = await query({ pageSize, pageIndex: 1 });
      setLoading(false);
      if (response && response.success) {
        if (response.data.items.length > 0) {
          setHoveFormValues(response.data.items[0]);
        }
        setPageResult(response.data);
      } else {
        message.error('获取应用列表失败！');
      }
    }
    init();
  }, []);

  // 
  const savePermissionRequest = useRequestHandle(savePermission, () => {
    message.success('创建成功.');

  });


  const menuData = pageResult.items.map((item) => {
    return {
      key: item.id,
      label: <div>
        {item.realName}
        <span style={{ float: "right" }}>
          {item.userName}
        </span>
      </div>,
    }
  })

  return (
    <Spin spinning={loading || getPageRequest.loading}>
      <Layout>
        <Sider width={300} className={styles.orgTree} theme="light">

          <div style={{ padding: "10px 14px 5px" }}> <Search
            placeholder="请输入名称" onSearch={(e) => {
              setPageSearch({
                current: 1,
                pageSize,
                keyword: e
              });
            }} style={{ width: 272 }} /></div>
          <Menu
            onClick={(e) => {
              setHoveFormValues(pageResult.items.find(item => item.id === e.key));
            }}

            style={{ width: 300, padding: "4px 10px", border: "0" }}
            mode="inline"
            selectedKeys={[hoveFormValues.id]}
            items={[...menuData]}
          />

          {pageResult.totalPages > 1
            ? <Pagination
              style={{
                margin: "0 auto",
                borderTop: "1px solid #cacaca30",
                paddingTop: "10px",
                textAlign: "center", position: "absolute", bottom: "10px", left: "0", right: "0"
              }}
              simple
              onChange={(page, pageSize) => {
                setPageSearch({
                  current: page,
                  pageSize,
                });
              }}
              current={pageResult.current}
              total={pageResult.totalItems} /> : null
          }
        </Sider>
        <Content>
          <AgentServerPermission
            loading={savePermissionRequest.loading}
            onFinish={(value) => {
              savePermissionRequest.run({ ...value, userId: hoveFormValues.id });
            }}
            record={hoveFormValues}
          />

        </Content>



      </Layout>
    </Spin>
  );
};

export default RoleManage;
